<template>
    <el-form ref="form" :model="newForm" label-width="auto" size="mini" label-position="left">  
        <el-form-item>
            <div class="bigsize">
                栋  号：<el-input ref="building" v-model="newForm.newBuilding"></el-input>
                房间号： <el-input ref="room" v-model="newForm.newRoom"></el-input>
            </div>
        </el-form-item>
        <div class="button">
            <el-form-item size="large">
                <el-button type="primary" @click="onSubmit(newForm)">修改</el-button>
            </el-form-item>
            <el-form-item size="large">
                <el-button type="primary" @click="cancel()">取消</el-button>
            </el-form-item>
        </div>
    </el-form>
</template>

<script>
export default {
    name:'Editdormitory',
    data() {
        return {
            newForm:{
                building:'0',
                room:'0',
                newBuilding:'0',
                newRoom:'0'
            },
        }
    },
    methods:{
        load(){
            this.newForm.building = this.newForm.newBuilding = this.$route.query.building
            this.newForm.room = this.newForm.newRoom = this.$route.query.room            
        },
        onSubmit(newForm){
            let _this = this
            let k = 0
            if(newForm.newBuilding == '' || newForm.newRoom == ''){
                alert('输入不要为空')
                return
            }
            if(isNaN(parseInt(newForm.newBuilding)) || isNaN(parseInt(newForm.newRoom))){
                alert("请不要输入字母");
                return;
            }
            if(parseInt(newForm.newBuilding)<100 || parseInt(newForm.newBuilding)>=300){
                alert("栋号超出范围");
                this.$refs.building.focus()
                return;
            }
            if(parseInt(newForm.newRoom)<100 || parseInt(newForm.newRoom)>=300){
                alert("房间号超出范围");
                this.$refs.room.focus()
                return;
            }
            axios.get('http://localhost:8081/dormitory/editdormitory',{params:_this.newForm}).then(function(resp){
                alert('修改成功')
                _this.newForm.building = _this.newForm.newBuilding
                _this.newForm.room = _this.newForm.newRoom
            }).catch(function(error){
                alert('修改失败')
            })
        },
        cancel(){
            this.$router.push('/dormitorymannager')
        }
    },
    mounted(){
        this.load();
    }
}
</script>

<style scoped>
    .el-form{
        width: 500px;
    }
    .el-form-item{
        text-align: center;
    }
    .el-input{
        display: inline-block;
        width: 70px;
        font-size: 14px;
    }
    .bigsize{
        font-size: 20px;
    }
    .button{
        display: flex;
        justify-content: space-evenly;
    }
</style>